import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './Serve4.css'
import { Button } from 'antd-mobile'

export default function Serve4() {
    const navigate = useNavigate()
    const [data, setData] = useState([
        {
            code: '3423423423534',
            drug: [
                { name: '奥司他韦颗粒', price: 36.00, situation: '口服，每次一袋，一天三次', num: 1 },
                { name: '头孢克无颗粒', price: 36.00, situation: '口服，每次一袋，一天三次', num: 1 },
            ],
            status: '待支付'
        },
        {
            code: '3423423423534',
            drug: [
                { name: '奥司他韦颗粒', price: 36.00, situation: '口服，每次一袋，一天三次', num: 1 },
                { name: '头孢克无颗粒', price: 36.00, situation: '口服，每次一袋，一天三次', num: 1 },
            ],
            status: '待发货'
        },
        {
            code: '3423423423534',
            drug: [
                { name: '奥司他韦颗粒', price: 36.00, situation: '口服，每次一袋，一天三次', num: 1 },
                { name: '头孢克无颗粒', price: 36.00, situation: '口服，每次一袋，一天三次', num: 1 },
            ],
            status: '已完成'
        },
        {
            code: '3423423423534',
            drug: [
                { name: '奥司他韦颗粒', price: 36.00, situation: '口服，每次一袋，一天三次', num: 1 },
                { name: '头孢克无颗粒', price: 36.00, situation: '口服，每次一袋，一天三次', num: 1 },
            ],
            status: '已取消'
        },
    ])
    return (
        <div className='serve4'>
            <div className='serve4-header'>
                <h1>药品订单</h1>
                <span onClick={() => { navigate(-1) }}>&lt;</span>
            </div>
            <div className="serve4-content">
                {
                    data.map((item, index) => {
                        return <div key={index} className='serve4-content-item'>
                            <h3>订单编号：{item.code}</h3>
                            <div className="drug">
                                {
                                    item.drug.map((item, index) => {
                                        return <div key={index} className='drug-item'>
                                            <p>{item.name} <span style={{ color: 'red' }}>￥{item.price}.00</span></p>
                                            <p>{item.situation}</p>
                                            <p className='num'>X{item.num}</p>
                                        </div>
                                    })
                                }
                                <p className='total'>共{item.drug.length}件商品 合计:￥72.00</p>
                            </div>
                            <div className="status">
                                <p style={{
                                    color: item.status === '待支付' || item.status === '待发货'
                                        ? 'red'
                                        : 'gary'
                                }}>{item.status}</p>
                            </div>
                            <div className='serve4-btn'>
                                {
                                    item.status === '待支付'
                                        ? <div><Button shape='rounded' color='primary' fill='outline'>取消订单</Button> <Button shape='rounded' color='primary'>去支付</Button></div>
                                        : item.status === '待发货'
                                            ? <Button shape='rounded' color='primary'>确认收货</Button>
                                            : item.status === '已完成'
                                                ? <div><Button shape='rounded' color='primary' fill='outline'>删除订单</Button> <Button shape='rounded' color='primary'>再次购买</Button></div>
                                                : <Button shape='rounded' color='primary' fill='outline'>删除订单</Button>
                                }
                            </div>
                        </div>
                    })
                }
            </div>
        </div>
    )
}
